<template>
  <div :class="prefix">
    <div :class="`${prefix}-left`" />
    <div :class="[`${prefix}-center`, `${bgcClass}`]">
      <div class="center-header">{{ title }}</div>
      <div class="center-logo" />
      <div class="center-login">
        <div class="title">您好, 欢迎登录</div>
        <div class="title-sub">国产高性能网络数据统计工具</div>
        <a-form :model="form" ref="formRef" :rules="rules">
          <a-form-item has-feedback name="useName">
            <a-input v-model:value="form.useName" placeholder="请输入用户名">
              <template #prefix>
                <user-outlined type="user" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item has-feedback name="password">
            <a-input v-model:value="form.password" placeholder="请输入密码">
              <template #prefix>
                <LockOutlined />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" :loading="loading" @click="handleLogin">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <div :class="`${prefix}-right`" />
  </div>
</template>

<script setup>
// import request from '@/utils/request';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import dayjs from 'dayjs';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import useInfoStore from '@/stores/modules/use';
const prefix = 'login';

const title = import.meta.env.VITE_APP_TITLE;

defineOptions({
  name: 'login',
});

// 校验规则
const rules = {
  useName: [{ required: true, message: '请输入用户名', trigger: 'change' }],
  password: [{ required: true, message: '请输入密码', trigger: 'change' }],
};

// 表单数据
const form = ref({
  useName: '',
  password: '',
});

// 登录功能
const formRef = ref();
const loading = ref(false);
const router = useRouter();
const { setUseInfo, getSetToken, token } = useInfoStore();

const handleLogin = () => {
  formRef.value.validate().then(() => {
    loading.value = true;
    // 登录成功之后才会跳转页面
    getSetToken(form.value.useName) // (可删)
      .then(() => {
        // 清除校验
        loading.value = false;
        // 转跳默认页面
        router.push('/');
        // 提示登录信息
        message.success('登录成功!');
      })
      .catch(() => {
        // 清除校验
        loading.value = false;
      });
  });
  // request({
  //   url: '/sys/login',
  //   method: 'post',
  //   data: {
  //     mobile: '13912345678',
  //     password: '123456',
  //   },
  // });
};

// 判断现在是什么时候,导致布局不一样
const bgcClass = ref('morning');

const setBackground = () => {
  // 获取当前时间
  const now = dayjs();
  // 获取当前小时
  const hour = now.hour();
  if (hour >= 9 && hour < 12) {
    bgcClass.value = 'morning';
  } else if (hour >= 12 && hour < 18) {
    bgcClass.value = 'noon';
  } else {
    bgcClass.value = 'evening';
  }
};

onMounted(() => {
  setBackground();
});
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  width: 100%;
  height: 100%;
  &-left {
    width: 61%;
    height: 100%;
  }
  &-center {
    display: flex;
    position: absolute;
    left: 50%;
    top: 21%;
    transform: translate(-50%);
    width: 1277px;
    height: 628px;
    &::before {
      background: #5959591a;
      bottom: 0;
      content: '';
      display: block;
      filter: blur(15px);
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      z-index: -1;
    }
    .center-header {
      position: absolute;
      left: 0;
      top: -80px;
      display: flex;
      align-items: center;
      font-family: 思源黑体;
      font-size: 36px;
      font-weight: 700;
    }
    .center-logo {
      position: relative;
      width: 681px;
      height: 622px;
      border-radius: 8px 0 0 8px;
      // background: linear-gradient(180deg, #17bfe5, #003b82 100%);
      overflow: hidden;
      //
      &::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        content: '';
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #003b82, #001529 100%);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }
    .center-login {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 593px;
      height: 622px;
      align-items: center;
      background-color: #fff;
      border-radius: 0 8px 8px 0;
      .title {
        width: 400px;
        color: #262626;
        font-family: 思源黑体;
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 8px;
      }
      .title-sub {
        width: 400px;
        color: #969698;
        margin-bottom: 24px;
      }
      :deep(.ant-form) {
        width: 400px;
        .ant-input {
          height: 38px;
        }
        .ant-btn {
          width: 100%;
          height: 48px;
        }
      }
    }
  }
  &-right {
    width: 39%;
    height: 100%;
    // background: linear-gradient(180deg, #17bfe5, #003b82 100%);
    background: linear-gradient(180deg, #003b82, #001529 100%);
  }
  .morning {
    .center-logo {
      &::before {
        background-image: url('@/assets/login/morning_login.png');
      }
    }
  }
  .noon {
    .center-logo {
      width: 62%;
      &::before {
        background-image: url('@/assets/login/noon_login.png');
      }
    }
    .center-login {
      width: calc(38% + 1px);
      transform: translateX(-1px);
    }
  }
  .evening {
    .center-logo {
      &::before {
        background-image: url('@/assets/login/evening_login.png');
      }
    }
  }
}
</style>
